import React, { useState, useEffect } from 'react'
import { List, Skeleton, Pagination, Button, message ,Tag} from 'antd';
import { ArticleListApi, ArticleDelApi ,ArticleApi} from '../request/api'
import {useNavigate} from 'react-router-dom'
import moment from 'moment'

export default function ListList() {
  const [list, setList] = useState([])
  const navigate = useNavigate()
  const [update, setUpdate] = useState(1)
  const [total, setTotal] = useState(0)
  const [current, setCurrent] = useState(1)
  const [summary,setSummary]=useState()
  const [pageSize, setPageSize] = useState(8)
  var chars=['#d7d7a6','#99ff33','#99ffcc','#808080','#ff9999','#FFB90F','#FF83FA','#FF82AB','#FF7F00','#FF69B4','#EE7AE9','#EE7600','#B452CD','#9ACD32','#CAFF70','#9966ff'];
  function generateMixed(){
      var colors="";
      var i =Math.ceil(Math.random()*10)
      colors=chars[i];
      return colors;
      
      }
  // 请求封装
  const getList = (num) => {
    ArticleApi({
      params:{
      size:pageSize,
      page: num}
    }).then(res => {
      if (res.code === 200) {     
        setList(res.data.list);
        setTotal(res.data.total);
        setSummary(res.data.list.summary)
        setCurrent(res.data.pageNum);
        //setPageSize(count);
      }
      else{
        message.error("请求超时！")
      }
    })
  }

  // 请求列表数据  componentDidMount
  useEffect(() => {
    getList(current)
  }, [])

  // 模拟componentDidUpdate
  useEffect(() => {
    getList(current)
  }, [update])

  // 分页
  const onChange = (pages) => {
    getList(pages);
  }

  // 删除
  function deleteArticle(id){
    console.log(id)
    ArticleDelApi(
        {
            params:{
                articleId:id
            }
        }
    ).then(res=>{
        if(res.code===200){
            message.success("删除成功!");
            setUpdate(update+1);    
        }
        else{
            message.error("删除失败!")
        }
        //window.location.reload()

    })
}
  return (
    <div style={{ padding: '20px' }}>
      <List
        itemLayout="horizontal"
        dataSource={list}
        renderItem={item => (
          <List.Item
            actions={[
              <Button type='primary' onClick={() => navigate('/edit'+(item.bodyId))} id={item.bodyId}>编辑</Button>, 
              <Button type='danger' onClick={()=>deleteArticle(item.id)} id={item.id}>删除</Button>
            ]}
          >
            <Skeleton loading={false}>
              <List.Item.Meta
                title={item.title}
                description={item.summary}
              />
              <div>{item.tags.map((item,index=>{  
                return  <Tag color={generateMixed()} key={index.id}>{index.tagName}</Tag>
              }))}</div>
              <div>{moment(item.createDate).format("YYYY-MM-DD")}</div>
            </Skeleton>
          </List.Item>
        )}
      />
      <Pagination style={{float: 'right',marginTop: '20px'}} onChange={onChange} total={total} current={current}  pageSize={pageSize} />  
    </div>
  )
}
